
<template>
    <scroll-view @scrolltolower="handleToLower" class="comlist" scroll-y v-if="comlist.length>0">
        <!-- 推荐模块的开始 -->
        <view class="comment_tap">
            <navigator class="comment_tap_item"
            v-for="item in comlist"
            :key="item.id"
            :url="`/pages/album/index?id=${item.target}`"
            >
                <image mode="widthFix" :src="item.thumb"></image>
            </navigator>
        </view>
        <!-- 推荐模块的结束 -->
       
        <!-- 月份模块开始 -->
        <view class="cen">
         <view class="year">
            <view class="year_left">
                <view class="wen_left">
                    <text>{{year.MM}}/</text>
                   {{year.DD}}
                </view>
                <view class="wen_right">会更漂亮哦</view>
            </view>
            <view class="year_right">更多></view>
         </view>
         <!-- 六个格子 -->
         <view class="image">
             <view class="item"
             v-for="(item,index) in year.items"
             :key="item.id"
             >
              <ima-data :list="year.items" :index="index">
           <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"></image>
              </ima-data>
            
            
             </view>
         </view>
        </view>
         <!-- 月份模块结束 -->
          <!-- 热门模块 开始-->
          <view class="host_content">
              <view class="host_title">
                  热门
              </view>
              <view class="hosts">
                  <view class="host_item"
                  v-for="(item,index) in hosts"
                  :key="item.id"
                  >
                  <ima-data :list="hosts" :index="index">
   <image mode="widthFix" :src="item.thumb"></image>
                  </ima-data>
                   
                  </view>
              </view>
          </view>
          <!-- 热门模块 结束-->
    </scroll-view>
</template>

<script>
import moment from "moment"
import imaData from "@/components/imgData/index.vue"
export default {
data(){
      return {
          comlist:[],
          year:{},
          hosts:[],
          params:{
                limit:30,
                order:"hot",
                skip:0
            },
         hint:true
      }
    },
  components:{
      imaData
  },
   mounted(){
      this.getList()
   },
   methods:{
     getList(){
      this.request({
            url:"http://157.122.54.189:9088/image/v3/homepage/vertical",
            data:this.params
        })
         .then(result=>{
            //  判断热门是否还有数据能容
            if(result.res.vertical.length===0){
                this.hint=false
                  uni.showToast({
               title: '没有可加载内容',
               icon: 'none',
                });
                return;
            }
         if(this.comlist.length===0){
                      //  推荐模块
            this.comlist=result.res.homepage[1].items
            // 月份模块
            this.year=result.res.homepage[2]
            // console.log(this.year)
            // 将时间戳 改为18号/2月的样式   使用moment.js
            this.year.MM=moment(this.year.stime).format("MM")
            this.year.DD=moment(this.year.stime).format("DD")
            // console.log(this.year)
             }
            // 热门模块开始
            this.hosts=[...this.hosts,...result.res.vertical]
            // console.log(this.hosts)
         })
        
       },
       handleToLower(){
        //    console.log('滑到底部了')
        if(this.hint){
            this.skip+=this.limit
            this.getList()
        }else{
            uni.showToast({
                title: '没有可加载内容',
                icon: 'none',
               
            });
        }
      
        
       }
   } 
}
</script>

<style lang="scss" scoped>
.comlist{
    // 此处的高度要减去顶部的选项卡高度
    height:calc( 100vh - 46px )
}
    .comment_tap{
        display:flex;
        flex-wrap: wrap;
        .comment_tap_item{
         width:50%;
         border:3px solid #fff;
        }
    }
    .cen{
        .year{
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx;
            font-weight: 550;
            .year_left{
                display:flex;
                justify-items: center;
                align-items: center;
                 .wen_left{
                  color:$color;
                  font-size:25rpx;
                  margin-right:10rpx;
                  text{
                      font-size: 30rpx;
                  }
                 }
                 .wen_right{
                     font-size:36rpx;
                     color:#888888;
                 }
            }
            .year_right{
                 color:$color;
            }
        }
        .image{
            display:flex;
            flex-wrap: wrap;
            .item{
                width:33.33%;
                border:3rpx solid #fff;
            }
        }
    }
.host_content {
      .host_title {
       padding: 10rpx;
       border-left:6rpx solid $color;
       color:#888888;
     }

  .hosts {
      display:flex;
      flex-wrap:wrap;
    .host_item {
        width:33.33%;
        border:3rpx solid #fff;
      image {

      }
    }
  }
}
</style>